<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>NMM Editor</title>
        <style>
			form {
				margin: 0;
			}
			textarea {
				display: block;
			}

			.ke-icon-sync_output {
				background-image: url(themes/default/default.png);
				background-position: 0px -672px;
				width: 16px;
				height: 16px;
			}

			.ke-icon-HL {
				background-image: url(themes/default/default.png);
				background-position: 0px -672px;
				width: 16px;
				height: 16px;
			}

			.gray {
				background-color: gray;
			}

			

        </style>
        <link rel="stylesheet" href="themes/default/default.css" />
        <script charset="utf-8" src="kindeditor-all.js"></script>
        <script charset="utf-8" src="lang/zh_CN.js"></script>
        <script src="jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script>
			KindEditor.ready(function(K) {
				window.editor = K.create('#content_id', {
					items : ['source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink', '/', 'sync_output', 'HL'],
					syncType : 'auto',
					//开启全屏
					fullscreenMode : true,
					filterMode : false,
					//加载iframe内样式
					cssPath : 'plugins/HL/HL.css'
				});
				K.ctrl(document.body, 38, function() {
					alert('ctrl + enter');
				});
				K('input[name=getHtml]').click(function(e) {
					alert(editor.html());
				});
				K('input[name=isEmpty]').click(function(e) {
					alert(editor.isEmpty());
				});
				K('input[name=getText]').click(function(e) {
					alert(editor.text());
				});
				K('input[name=selectedHtml]').click(function(e) {
					alert(editor.selectedHtml());
				});
				K('input[name=setHtml]').click(function(e) {
					editor.html('<h3>Hello KindEditor</h3>');
				});
				K('input[name=setText]').click(function(e) {
					editor.text('<h3>Hello KindEditor</h3>');
				});
				K('input[name=insertHtml]').click(function(e) {
					editor.insertHtml('<strong>插入HTML</strong>');
				});
				K('input[name=appendHtml]').click(function(e) {
					editor.appendHtml('<strong>添加HTML</strong>');
				});
				K('input[name=clear]').click(function(e) {
					editor.html('');
				});
				console.info("started");
				showText();
				ext.keyup();
				ext.dialog();
			});

			function showText() {
				console.info(editor.html());
				setTimeout(function() {
				}, 10);

			}
        </script>
        <script type="text/javascript" charset="utf-8">
			var ext = {
				keyup : function() {
					//console.dir(window.editor);
					$(editor).keyup(function() {
						console.info(editor.html());
						console.info($(this).html());
					});

				},
				content : function() {
					editor.sync('#editor_id');
					console.info($("#content_id").html());
				},
				dialog : function() {

				}
			}
        </script>
    </head>
    <body>
        <form>
            <textarea id="content_id" name="content" style="width:800px;height:400px;">
        KindEditor
        &lt;strong&gt;HTML内容&lt;/strong&gt;
border-style:dotted;
all four borders are dotted
The border-style property is used in the example above. However, it also works with border-width and border-color.

Border - Shorthand property
As you can see from the examples above, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property. This is called a shorthand property.

The border property is a shorthand for the following individual border properties:

border-width
border-style (required)
border-color
Example

border:5px solid red;


More Examples
All the top border properties in one declaration
This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration.

Set the style of the bottom border
This example demonstrates how to set the style of the bottom border.

Set the width of the left border
This example demonstrates how to set the width of the left border.

Set the color of the four borders
This example demonstrates how to set the color of the four borders. It can have from one to four colors.

Set the color of the right border
This example demonstrates how to set the color of the right border.

All CSS Border Properties
Property    Description
border  Sets all the border properties in one declaration
border-bottom   Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border


     </textarea>
            <p>
                <input type="button" name="getHtml" value="取得HTML" />
                <input type="button" name="isEmpty" value="判断是否为空" />
                <input type="button" name="getText" value="取得文本(包含img,embed)" />
                <input type="button" name="selectedHtml" value="取得选中HTML" />
                <br />
                <br />
                <input type="button" name="setHtml" value="设置HTML" />
                <input type="button" name="setText" value="设置文本" />
                <input type="button" name="insertHtml" value="插入HTML" />
                <input type="button" name="appendHtml" value="添加HTML" />
                <input type="button" name="clear" value="清空内容" />
                <input type="reset" name="reset" value="Reset" />
            </p>
        </form>
    </body>
</html>
